<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/html">

<head>
    <title>添加日记</title>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/switch.min.css">
    <link rel="stylesheet" href="static/css/myStyle.css">
    <meta charset="UTF-8">
</head>

<body>
<div class="jumbotron" style="margin:0">
    <div class="container">
        <p>Welcome Dirary Website</p>
    </div>
</div>

<!--<div class="alert alert-success alert-dismissible fade in" role="alert" style="margin: 0">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
    </button>
    <strong> UserName !</strong> 欢迎登录九宫格日记网
</div>-->

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">九宫格日记网</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

            </ul>

            <!--<ul class="nav navbar-nav navbar-right">-->
            <!--<li class="dropdown">-->
            <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
            <!--aria-expanded="false">UserName<span class="caret"></span></a>-->
            <!--<ul class="dropdown-menu">-->
            <!--<li><a href="#">我的日记</a></li>-->
            <!--<li><a href="#">我的资料</a></li>-->
            <!--<li role="separator" class="divider"></li>-->
            <!--<li><a href="#">退出登录</a></li>-->
            <!--</ul>-->
            <!--</li>-->
            <!--</ul>-->
            <!--<div class="navbar-form navbar-right">-->
            <!--<a type="button" class="btn btn-success">新建日记</a>-->
            <!--</div>-->

            <div class="navbar-form navbar-right">
                <a type="button" class="btn btn-primary">登录</a>
                <a type="button" class="btn btn-info">注册</a>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="form-inline">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">选择主题</div>
                <select name="" onchange="ChangeDiaryTheme(this)" class="form-control" style="width: 120px;">
                    <option value="./static/images/theme1.jpg">默认</option>
                    <option value="./static/images/theme1.jpg">主题1</option>
                    <option value="./static/images/theme2.jpg">主题2</option>
                    <option value="./static/images/theme3.jpg">主题3</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div style="width: 500px;background:url(7.jpg) no-repeat ;background-size:100% 100%;margin: 0 auto;height: 500px;margin-bottom: 25px;position: relative"
         id="diaryback">

        <!-- Grid1 -->
        <div class="lattice" style="top: 25px;left: 25px;">
            <select name="grid1_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)" checked >
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid2-->
        <div class="lattice" style="top: 25px;left: 176px;">
            <select name="grid2_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid3-->
        <div class="lattice" style="top: 25px;right: 25px;">
            <select name="grid3_title"  class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid4-->
        <div class="lattice" style="top: 176px;left: 25px;">
            <select name="grid4_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid5-->
        <div class="lattice" style="top: 176px;left: 176px;">
            <select name="weather" id="" class="form-control input-sm" onchange="ChangeWeather(this)" style="background-color: #5bc0de">
                <option value="./static/images/5.png">选择天气</option>
                <option value="./static/images/1.png">1</option>
                <option value="./static/images/2.png">2</option>
                <option value="./static/images/3.png">3</option>
                <option value="./static/images/4.png">1</option>
                <option value="./static/images/5.png">2</option>
                <option value="./static/images/6.png">3</option>
                <option value="./static/images/7.png">1</option>
                <option value="./static/images/8.png">2</option>
                <option value="./static/images/9.png">3</option>
            </select>
            <div class="defaultlist" style="text-align: center">
                <img src="./static/images/5.png" width="115px" height="115px" alt="">
            </div>
        </div>

        <!-- Grid6-->
        <div class="lattice" style="top: 176px;right: 25px;">
            <select name="grid6_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid7-->
        <div class="lattice" style="bottom: 25px;left: 25px;">
            <select name="grid7_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid8-->
        <div class="lattice" style="bottom: 25px;right: 176px;">
            <select name="grid8_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

        <!-- Grid9-->
        <div class="lattice" style="bottom: 25px;right: 25px;">
            <select name="grid9_title" class="form-control input-sm" onchange="ChangeDefaultType(this)" style="background-color: #5bc0de">
                <option value="1">开心的事</option>
                <option value="2">111</option>
                <option value="3">222</option>
                <option value="4">333</option>
            </select>
            <div class="defaultlist">
                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" checked onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情1</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情2</small>
                    </label>
                </div>

                <div class="radio">
                    <label>
                        <input type="radio" name="defcontent_1" onchange="ChangeGridContent(this)">
                        <small>做了什么什么事情3</small>
                    </label>
                </div>
            </div>
            <input type="text" name="selfcontent_1" class="form-control input-sm" placeholder="自定义内容...">
        </div>

    </div>
</div>


<div class="container text-center" style="margin-bottom: 50px;">
    <a href="#" class="btn  btn-success" style="width: 120px;">预览</a>
</div>


<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/html2canvas.js"></script>
<script type="text/javascript">

    function ChangeDiaryTheme(op) {

        $("#diaryback").css("background","url("+$(op).val()+")").css("background-size","100% 100%")
    }
    
    function ChangeDefaultType(op) {
        alert($(this))
    }

    
    function ChangeWeather(op) {
        $(op).next().find("img").first().attr('src',$(op).val())
    }
    
    function  ChangeGridContent(op) {
        $(op).parent().parent().parent().next().val($(op).next().text())
    }
</script>
</body>
</html>